<!DOCTYPE html>
<html><body>
<canvas id="c"  width="640px" height="480px"></canvas>
<script type="text/javascript">
    function CreateShader(gl, type, source)
    {
        const shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);

        if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
        {
            alert('An error occurred compiling '+type+' shaders: ' + gl.getShaderInfoLog(shader));
            gl.deleteShader(shader);
            return null;
        }
        return shader;
    }

    function CreateProgram(gl, vs, fs)
    {
        const program = gl.createProgram();
        var vsShader = CreateShader(gl, gl.VERTEX_SHADER, vs);
        gl.attachShader(program, vsShader);
        gl.deleteShader(vsShader);

        var fsShader = CreateShader(gl, gl.FRAGMENT_SHADER, fs);
        gl.attachShader(program, fsShader);
        gl.deleteShader(fsShader);

        gl.linkProgram(program);

        if(!gl.getProgramParameter(program, gl.LINK_STATUS))
        {
            alert('Unable to Create the shader program: '+ gl.getProramInfoLog(program));
            return null;
        }
        return program;
    }
    const vs_shader = 
       `#version 300 es
        precision highp float;
        layout(location = 0) in vec2 position;
        layout(location = 1) in vec3 color;
        out vec3 vs_fsColor;
        void main()
        {
            vs_fsColor = color;
            gl_Position = vec4(position, 0.0, 1.0);
        }
    `;
    const fs_shader = 
       `#version 300 es
        precision highp float;
        out vec4 color;
        in vec3 vs_fsColor;
        void main()
        {
            color = vec4(vs_fsColor, 1.0);
        }
    `;

    const vertices = new Float32Array([
        0.0, 0.8,
        -0.6, -0.8,
        0.6, -0.8
    ]);
    const color = new Float32Array([
        1.0, 0.0, 0.0,
        0.0, 1.0, 0.0,
        0.0, 0.0, 1.0
    ]);
    var canvas = document.getElementById("c");
    var gl = canvas.getContext("webgl2");

    const program = CreateProgram(gl, vs_shader, fs_shader);

    const vao = gl.createVertexArray();
    gl.bindVertexArray(vao);
    const vbo = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(0);

    const colorBO = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBO);
    gl.bufferData(gl.ARRAY_BUFFER, color, gl.STATIC_DRAW);
    gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(1);

    gl.clearColor(1.0, 1.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    
    gl.useProgram(program);
    gl.drawArrays(gl.TRIANGLES,  0, 3);

    gl.deleteProgram(program);
    gl.deleteBuffer(vbo);
    gl.deleteBuffer(colorBO);
    gl.deleteVertexArray(vao);
</script>
</body></html>
